<template>
	<view class="page">
		<u-swiper :list="swiper" height="500" img-mode="widthFix" indicator-pos="bottomRight"></u-swiper>

		<view class="u-padding-20">
			<view class="title u-line-2">{{info.goodsName}}</view>
			<view class="u-flex  u-row-between u-margin-top-10">
				<view class="u-flex">
					<view class="price">￥{{info.price}}</view>
					<view class="oldprice">
						￥{{info.linePrice}}
					</view>
				</view>
				<view class="share">
					<button open-type="share"></button>
					<u-icon name="share" color="#fff"></u-icon>
					<text style="margin-left:5rpx;font-size: 26rpx;">分享</text>
				</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<u-cell-group>
			<u-cell-item title="商品运费" :value="'￥'+info.expressFee" :arrow="false"></u-cell-item>
			<u-cell-item title="商品规格" :value="size" @click="selectSize" v-if="info.spec.length"></u-cell-item>
		</u-cell-group>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<view class="">
			<view style="margin:40rpx auto 40rpx auto;width: 140rpx;">

				<u-image src="/static/detailtitle.png" width="140" height="60"></u-image>

			</view>


			<u-parse :html="info.detail"></u-parse>


		</view>



		<view class="navigation">
			<view class="left">
				<view class="item" @click="backHome">
					<u-icon name="home" :size="40"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>

				<view class="item car" :class="israte?'rate':''" @click="goCar">
					<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>

			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCar">加购物车</view>
				<view class="gray btn u-line-1" @click="buy">立即购买</view>
			</view>
		</view>


		<size ref="chilren"></size>


	</view>
</template>

<script>
	import size from './components/size.vue';

	export default {
		components: {
			size
		},
		data() {
			return {
				count: "",
				size: "请选择规格",
				Sid: "", //规格id
				info: {
					goodsName: "",
					price: "",
					linePrice: "",
					expressFee: '',
					detail: "",
					spec:[]
				},
				swiper: [],
				id: ""
			}
		},
		onLoad(options) {

			if (options.id) {
				this.id = options.id
			}
			if(options.Sid){
				this.Sid=options.Sid
			}
			this.goodsDetail()

		},
		methods: {
			// 1 加入购物车  
			// 2 购买
			// 3 选择规格
			addCar() {
				this.$refs.chilren.show = true;
				this.$refs.chilren.statusing = 1;
				setTimeout(() => {
					this.$refs.chilren.info = this.info
				}, 0)
			
			},
			buy() {
				if (this.Sid) {            
						this.$u.post('/api/indent/affirm', {
							goods_id: this.info.id,
							goods_spec_id: this.Sid,
							num: this.$refs.chilren.value,
						}, {}).then(res => {
							uni.navigateTo({
								url: "/pages/sure_book/index?num="+this.$refs.chilren.value+ '&Sid='+ this.Sid + '&id='+this.info.id
							})
						}).catch(err => {})
                               
				} else {
					this.$refs.chilren.show = true;
					this.$refs.chilren.statusing = 2;

					setTimeout(() => {
						this.$refs.chilren.info = this.info
					}, 0)
				}
			},
			selectSize() {
				this.$refs.chilren.show = true;
				this.$refs.chilren.statusing = 3;
				setTimeout(() => {
					this.$refs.chilren.info = this.info
				}, 0)
			},
			goodsDetail() {
				this.$u.post('/api/index/goodsDetail', {
					goods_id: this.id
				}, {}).then(res => {
					this.swiper = res.data.images;
					this.info = res.data;
					
				    if(this.Sid){
					   var specName=this.info.spec.filter(item=>item.id==this.Sid)
					   this.size=specName[0].specName
					}
					
				}).catch(err => {})
			},
			
			
			backHome(){
				uni.switchTab({
					url:"../../pages/index/index"
				})
			},
			goCar(){
				uni.switchTab({
					url:"../../pages/car/index"
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 90rpx;
	}
	.share {
		background: #628DFF;
		border-radius: 30rpx;
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #FFFFFF;
		position: relative;

		button {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}

	.title {
		color: #333;
		font-size: 36rpx;
	}

	.price {
		color: #FF6450;
		font-size: 56rpx;
	}

	.oldprice {
		text-decoration: line-through;
		color: #999999;
		font-size: 28rpx;
		margin-left: 20rpx;
	}



	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		width: 100%;



		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}

			.item:active {
				opacity: 0.6;
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: space-around;
			width: 500rpx;

			.btn {
				line-height: 66rpx;

				border-radius: 36rpx;
				color: #ffffff;
				width: 200rpx;
				text-align: center;
			}

			.cart {
				background-color: #628DFF;
				margin-right: 30rpx;
			}

			.gray {
				background-color: #FF6450;

				margin-left: 20rpx;

			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
